<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <% include statsheader %>


</head>
<body>
<% include statsabove %>
<div id="wrapperService">
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>




    <div id='content'>

        <div id='welcomemessage'>
            <div class="topintro">
            Visualize a network of words used on Twitter by a certain user, with a hashtag or a search term:
            </div>
            <% include messages %>
            <br>&nbsp;<br>
            <form action='/import' name='submitform' id="submitform" method='post' class='pure-form pure-form-stacked'>
            <input id="source1" type="hidden" name="source" value="twitter">
              <div id="inputplace"></div>
                <div id="extracttwitter">


                <div id="searchtermbox">
                    Hashtag / Search Term / Account:
                    <br>
                    <label for="searchinput" class="pure-input">
                        <input type='text' name='search' id="searchinput" placeholder='@username or #hashtag' value="<% if (fornode) { %><%= fornode %><% }  %>">
                        @username, #hashtag or keyword. For additional settings click below.
                    </label>    
                </div>
                
    

                <div id="listview" style="display: none">
                     &nbsp;<br>
                     URL of the Twitter List (or slug):
                     <br>
                     <label for="listname" class="pure-input">
                        <input type="text" name="listname" id="listname" value="" placeholder='dataviz' />
                        Enter the full URL of the Twitter list or its last part (the list's name).
                    </label>
 
                </div>
                &nbsp;<br>
                <a href="javascript:" id="advancedpane">+ show advanced settings</a>
                <br>&nbsp;<br>
                <div id="twittersetting">
                Advanced Twitter Import Settings:

                    <label for="extract5" class="pure-radio">
                            <input id="extract5" type="radio" name="extract" value="lists">
                            tweets from a user's twitter list
                    </label>

                    <label for="extract4" class="pure-radio">
                            <input id="extract4" type="radio" name="extract" value="tophashtag" checked>
                            top tweets in english with a hashtag
                    </label>

                    <label for="extract1" class="pure-radio">
                        <input id="extract1" type="radio" name="extract" value="user">
                        graph of words used by a user
                    </label>

                    <label for="extract2" class="pure-radio">
                        <input id="extract2" type="radio" name="extract" value="timeline">
                        graph of words in user's timeline
                    </label>

                    <label for="extract3" class="pure-radio">
                        <input id="extract3" type="radio" name="extract" value="hashtag">
                        graph of words used with a hashtag
                    </label>

                   
                    &nbsp;<br>

                

                    <label for="extractfilter" class="pure-checkbox">
                            <input id="extractfilter" type="checkbox" name="excludesearchterm" value="1" checked> exclude search term from the graph<br>
                    </label>

                    <label for="showtwitters" class="pure-checkbox">
                        <input id="showtwitters" type="checkbox" name="showtwitters" value="1"> show originating twitter accounts in graph<br>
                    </label>

                    <label for="onlymentions" class="pure-checkbox">
                        <input id="onlymentions" type="checkbox" name="onlymentions" value="1"> make a graph of twitter users only<br>
                    </label>

                    <label for="excludementions" class="pure-checkbox">
                        <input id="excludementions" type="checkbox" name="excludementions" value="1" checked> exclude all twitter users from graph<br>
                    </label>

                <br>

                </div>


                <div id="savelists">
                        &nbsp;<br>
                    Save into Context Graph:
                    <br>
                    <input type='text' name='context' placeholder='graph_name' value='<% if (context) {  %><%= context %><% } else { %>twitter<% } %>'/>
                    <br>
                </div>


                <div id="howmanyposts">
                How Many Recent Posts:
                <input type='text' name='limit' value='200' />
                <br>
                </div>

                <div id="importsettings">
                Include only Hashtags?
                <label for="settings1" class="pure-radio">
                    <input id="settings1" type="radio" name="settings" value="morphemes">
                    Process both hashtags and words
                </label>

                <label for="settings2" class="pure-radio">
                    <input id="settings2" type="radio" name="settings" value="hashtags" checked>
                    Process only hashtags
                </label>
                <br>

               

                </div>

                <input type="hidden" id="selectedContexts" name="selectedContexts" value="">
                <input type="hidden" name="statementid" value="">
                &nbsp;<br>
                <input type='submit' name="submit" value="visualise" class="pure-button pure-button-primary">

            </form>   &nbsp;<br>&nbsp;<br>





        </div>

        <div id="graph-container"></div>


    </div>




</div>
</div>


<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jquery-ui.min.js"></script>
<script src="/javascripts/string.min.js"></script>
<script src="/javascripts/underscore-min.js"></script>
<script src="/javascripts/jquery.textcomplete.js"></script>
<script src='/javascripts/jquery.autosize.js'></script>
<script src="/javascripts/ui.js"></script>
<script src="/javascripts/jquery.mobile-events.min.js"></script>


<script>
    ;(function(){

      var advancedpane = 0;

      $('#twittersetting').hide();

      $("#advancedpane").click(function() {
          if (!advancedpane) {
      //    $("#advancedsettings").show();
          $("#advancedpane").text('– hide advanced settings');
          $("#twittersetting").show();
          advancedpane = 1;
          }
          else {
        //  $("#advancedsettings").hide();
          $("#advancedpane").text('+ show advanced settings');
          $("#twittersetting").hide();
          advancedpane = 0;

          }

      });

      var radioButtons = $("[name=extract]"); // get both radiobuttons

      radioButtons.change(function () {
            if ($(this).val() === "lists") {
                $("#listview").show();
               
            }
            else
            {
                $("#listview").hide();
            }
     });


    $('form#submitform').submit(function(){
        $(this).find('input[type=submit]').attr('disabled', 'disabled');
    });

    $("#listname").on('change',function () {

        let listuser = $('#listname').val().split("/").reverse()[2];
        
        if (listuser) {
            $('#searchinput').val('@' + $('#listname').val().split("/").reverse()[2]);
        }
    });





    })();
</script>




<% include statsbelow %>
</body>
</html>
